<template>
  <a-layout class="layout">
    <a-layout-sider
      class="asider"
      theme="light"
      width="97"
      collapsed-width="50"
      v-model:collapsed="state.collapsed"
      :trigger="null"
      collapsible
    >
      <div class="logo">
        <img v-if="state.collapsed" class="collapsed" src="../assets/logo_collapsed2.png" />
        <img v-else src="../assets/logo_collapsed1.png" />
        <!-- <span v-if="!state.collapsed">美联数科</span> -->
      </div>
      <a-menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        theme="light"
        :inline-collapsed="state.collapsed"
        class="menuList"
      >
        <template v-for="(item, index) in menuDatas" :key="index">
          <template v-if="item.meta.title && item.children && item.children.length > 0">
            <a-sub-menu class="item">
              <template #title>
                <icon-font class="icon" v-if="item.meta.icon" :type="item.meta.icon" />
                <span class="text">{{ item.meta.title }}</span>
              </template>
              <a-menu-item
                v-for="(itemTwo, j) in item.children"
                :key="itemTwo.path"
                @click="titleClick(itemTwo)"
              >
                <icon-font class="icon" v-if="itemTwo.meta.icon" :type="itemTwo.meta.icon" />
                <span class="text">{{ itemTwo.meta.title }}</span>
              </a-menu-item>
              <!-- <template v-for="(itemTwo, j) in menuDatas" :key="j + item.key" v-if="false">
              <a-menu-item>
                <template #title>
                  <icon-font v-if="itemTwo.meta.icon" :type="itemTwo.meta.icon" />
                  {{ itemTwo.meta.title }}
                </template>
              </a-menu-item>
            </template> -->
            </a-sub-menu>
          </template>
          <a-menu-item class="item" v-else :key="item.path" @click="titleClick(item)">
            <!-- <template #title>
              <span>{{ item.meta.title }}</span>
            </template> -->
            <icon-font class="icon" v-if="item.meta.icon" :type="item.meta.icon" />
            <span class="text">{{ item.meta.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header" style="background: #fff; padding: 0">
        <RightContent
          :class="['headerTop', state.collapsed == false ? 'on' : '']"
          :current-user="currentUser"
          v-model:collapsed="state.collapsed"
        />
        <!-- <div class="layout-breadcrumb" v-if="router.currentRoute.value.path !== '/home'">
          <a-breadcrumb>
            <a-breadcrumb-item v-for="(route, index) in breadcrumb" :key="route.path">
              <span
                class="breadcrumb-item-select"
                v-if="router.currentRoute.value.path === route.path"
              >
                <icon-font :type="route.icon" />
                {{ route.breadcrumbName }}
              </span>
              <router-link v-else :to="{ path: route.path }">
                <SmileOutlined />
                {{ route.breadcrumbName }}
              </router-link>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div> -->
      </a-layout-header>
      <a-layout-content>
        <RouterView
          class="layout-content"
          style="background: #f0f2f5"
          :style="layoutContentStyle"
          v-slot="{ Component, route }"
        >
          <transition name="slide-left" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </RouterView>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { useRouter, RouterView, RouterLink } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { SmileOutlined, HeartOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted, watch, computed, h } from 'vue'
import RightContent from './RightContent.vue'

import store from '@/store'
const router = useRouter()
const state = reactive({
  menuWidth: '',
  collapsed: false,
  selectedKeys: [''],
  openKeys: [''],
  preOpenKeys: ['']
})
const menuDatas = computed(() => {
  let menuList = JSON.parse(JSON.stringify(store.userApp.menuList))
  for (let i = 0; i < menuList.length; i++) {
    menuList[i].title = menuList[i].name
    menuList[i].label = menuList[i].name
    if (menuList[i].children && menuList[i].children.length > 0) {
      for (let j = 0; j < menuList[i].children.length; j++) {
        menuList[i].children[j].title = menuList[i].children[j].name
        menuList[i].children[j].label = menuList[i].children[j].name
      }
    }
  }
  const home = {
    label: '数据统计',
    meta: {
      title: '数据统计',
      icon: 'icon-shujutongji'
    },
    name: '数据统计',
    path: '/home',
    title: '数据统计'
  }
  console.log(menuList)
  return [home, ...menuList]
})
watch(
  router.currentRoute,
  () => {
    if (router.currentRoute._value.path == '/home') {
      state.selectedKeys = ['/home']
    } else {
      let menuList = JSON.parse(JSON.stringify(store.userApp.menuList))
      for (let i = 0; i < menuList.length; i++) {
        if (menuList[i].path == router.currentRoute.value.path) {
          state.selectedKeys = []
          state.selectedKeys.push(menuList[i].path)
        }
      }
    }
  },
  {
    immediate: true
  }
)
const titleClick = (item) => {
  router.push({
    path: item.path
  })
}
const gobaHome = () => {
  router.push({
    path: '/home'
  })
}
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed
  state.openKeys = state.collapsed ? [] : state.preOpenKeys
}
const currentUser = reactive({
  nickname: 'Admin',
  avatar: 'A'
})
const breadcrumb = computed(() => {
  return router.currentRoute.value.matched.concat().map((item) => {
    return {
      path: item.path,
      breadcrumbName: item.meta.title || '',
      icon: item.meta.icon
    }
  })
})
const layoutContentStyle = computed(() => {
  // if (router.currentRoute.value.name === 'home') {
  return {
    height: 'calc(100vh - 48px)'
  }
  // } else {
  //   return {
  //     height: 'calc(100vh - 88px)'
  //   }
  // }
})
</script>
<style lang="less" scoped>
.layout {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  overflow: hidden;
}

.layout-breadcrumb {
  height: 40px;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;

  ::v-deep(.breadcrumb-item-select) {
    color: #165dff;
  }
}

.layout-content {
  padding: 16px;
  overflow: hidden auto;
  position: relative;
}

.logo {
  // height: 68px;
  // width: 97px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #165dff;

  img {
    height: 68px;
    width: 97px;
  }
}

// .collapsed {
//   transform: scale(0.7);
//   margin-left: -14px;
// }
.asider {
  overflow: hidden;

  .menuList {
    ::v-deep(.item) {
      width: 81px;
      height: 72px;
      margin: 8px;
      padding: 0px !important;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      color: #86909c;

      .ant-menu-title-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
      }

      span {
        margin: 0;
      }

      .icon {
        font-size: 18px;
      }

      .text {
        margin-top: 9px;
        font-size: 14px;
        line-height: 20px;
      }

      &:hover {
        color: #165dff !important;
        background-color: #e8f3ff;
      }
    }

    ::v-deep(.ant-menu-item-selected) {
      color: #165dff;
      background-color: #e8f3ff;
    }
  }
}

.asider[class~='ant-layout-sider-collapsed'] {
  .logo {
    .collapsed {
      // transform: scale(0.7);
      // margin-left: -40px;
      height: 48px;
      width: 50px;
    }
  }

  .menuList {
    ::v-deep(.item) {
      width: 50px;
      height: 48px;
      box-sizing: border-box;
      margin: 0px;
    }
  }
}

.header {
  display: inline-flex !important;
  flex-direction: column !important;
  height: auto !important;
}
</style>
